<ion-header title="首页">
  <ion-navbar>
    <ion-title>
      <ion-item class='search'>
          <ion-label class='searchIon' [ngClass]="{'isFocus':searchGetTheFocus==1,'loseFocus':searchGetTheFocus==2}">
          </ion-label>
          <ion-input placeholder='搜素美图，美甲师，店铺' class='search-input' (ionFocus)='getFocus()' (ionBlur)='loseFocus()' (keydown)="getTheKeyDown($event)" [(ngModel)]='myInput'></ion-input>
      </ion-item>
    </ion-title>
  </ion-navbar>
  <ion-segment [(ngModel)]="func" style="padding-top: 1px;height: 100%;">
    <ion-item>
      <ion-label style="margin:0;overflow: visible;padding-left:28%;font-size:14px;">
        智能排序
      </ion-label>
      <ion-select [(ngModel)]='toppings' (ngModelChange)='GetTabBarShopsAPI(toppings)' style="padding-left:0px" okText="确认" cancelText="取消">
        <ion-option value='1'>款式优先</ion-option>
        <ion-option value='2'>销量优先</ion-option>
        <ion-option value='3'>人气优先</ion-option>
        <ion-option value='4'>好评优先</ion-option>
      </ion-select>
    </ion-item>

    <ion-item style="padding-left:0;">
      <ion-label style="margin:0;overflow: visible;padding-left:23%;font-size:14px;">附近美店</ion-label>
      <ion-select [(ngModel)]="gaming" (ngModelChange)='GetTabBarShopsAPI(gaming)' style='padding-left:0px' okText='确认' cancelText='取消'>
        <ion-option value='5'>500米</ion-option>
        <ion-option value='6'>1000米</ion-option>
        <ion-option value='7'>1500米</ion-option>
      </ion-select>
    </ion-item>

    <ion-item style="padding-left:0;border-bottom:0;">
      <ion-label style="margin:0;overflow: visible;padding-left:15%;font-size:14px;">服务方式</ion-label>
      <ion-select [(ngModel)]="serveStyle" (ngModelChange)='GetTabBarShopAPI(serveStyle)' style="padding-left:0px" okText="确认" cancelText='取消'>
        <ion-option value='8'>上门</ion-option>
        <ion-option value='9'>到店</ion-option>
      </ion-select>
    </ion-item>
  </ion-segment>
</ion-header>


<ion-content>
  <ion-card *ngIf="!showData">
    <ion-card-content>
      <h2 text-center>暂无相关数据</h2>
    </ion-card-content>
  </ion-card>
  <div *ngIf="showData">
    <ion-list class="cont" *ngFor="let item of ShopArr">
      <div class="avater" (click)="toShopDetail(item.shop_id)">
        <div class="detailLeft clearfix">
          <div class="shopImg">
            <!-- <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/1_328.jpg"> -->
            <img src='{{picture}}{{item.shop_logo}}'>

          </div>
          <div class="ShopDetail ">
            <div class="clearfix">
              <h4 style="margin:0;padding:0;float:left;font-size:16px;">{{item.shop_name}}</h4>
              <span class="getWay" *ngIf="item.on_site_service==1&&item.on_shop_service==1">上门 | 到店</span>
              <span class="getWay" *ngIf="item.on_site_service==1&&item.on_shop_service==0">上门</span>
              <span class="getWay" *ngIf="item.on_site_service==0&&item.on_shop_service==1">到店</span>
              <span class="getWay" *ngIf="item.on_site_service==0&&item.on_shop_service==0"></span>
            </div>
            <p style="margin:0;color: #ccc; padding: 0.3rem 0;font-size:12px;">{{item.service_count}}款美图 | {{item.fans}}粉丝</p>
            <p style="margin:0;color: #ccc; padding: 0;font-size:12px;">{{item.shop_address}}</p>
          </div>
        </div>
        <div class="attention" *ngIf="showAttentio">
          <button class="setAtt" (click)=" unsetAttention(event,item.is_focus,item.shop_id);$event.stopPropagation()" *ngIf="item.is_focus==0?true:false">关注</button>
          <button class="unsetAtt" (click)="unsetAttention(event,item.is_focus,item.shop_id);$event.stopPropagation()" *ngIf="item.is_focus==1?true:false">已关注</button>
        </div>
      </div>
      <div class="imglist ">
        <ul class="clearfix">
          <li *ngFor="let nail of item.service_display_three">
            <div class="listDetail">
              <div class="detalPic" (click)="toShopInfo(nail.service_id,item.shop_id)">
                <!-- <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/2_328.jpg"> -->
                <img src='{{picture}}{{nail.nail_image}}'>
              </div>
              <div style="font-size: 12px;">
                <span style=" overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            width: 56px;
                            height: 20px;
                            line-height: 30px;
                            display: inline-block;">
                  {{nail.nail_name}}</span>
                <span style="color:red;margin-left: 5px;">{{nail.service_price}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </ion-list>
  </div>

</ion-content>
